import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';

import {
    GridComponent,
    DatasetComponent,
    LegendComponent
} from 'echarts/components';

echarts.use([
    GridComponent,
    TitleComponent,
    TooltipComponent,
    DatasetComponent,
    LegendComponent,
    BarChart,
    CanvasRenderer
]);

echarts.use([TitleComponent, TooltipComponent, BarChart, CanvasRenderer, PieChart]);

const EChartsComponent = () => {
    const chartRef = useRef(null);
    const chartInstance = useRef(null); // 用于存储图表实例

    useEffect(() => {
        const chart = echarts.init(chartRef.current);

        // 初始化图表实例
        chartInstance.current = chart;


        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['年度权重', '季度权重', '本月权重', '本周权重']
            },
            series: [
                {
                    name: '内科综合',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [360, 335, 400, 334]
                },
                {
                    name: '外科综合',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 232, 198, 232]
                },
                {
                    name: '超声科',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 132, 101, 134]
                },
            ]
        };

        const returnRate = function (num, total, len = 2) {
            const numeratorBackup = Number(num)
            const denominatorBackup = Number(total)
            if (denominatorBackup === 0 || numeratorBackup === 0) {
                return 0
            } else {
                const result = numeratorBackup / denominatorBackup
                const divisor = result.toString().indexOf('.') !== -1 ? result.toString().split('.')[1] : result
                if (numeratorBackup % denominatorBackup === 0 || divisor.length <= len) {
                    //val = ((numeratorBackup / denominatorBackup) * 100).toFixed(len)
                } else {
                    //val = ((numeratorBackup / denominatorBackup) * 100).toFixed(len)
                }

                //return Number(val)
            }

        }
        var series = option.series
        function getSum(params) {
            let dataValue = 0
            for (let i = 0; i < series.length; i++) {
                dataValue += series[i].data[params.dataIndex]
            }
            return returnRate(dataValue, 600)
        }
        series[series.length - 1].label.formatter = getSum

        chart.setOption(option);
        // 监听容器大小变化
        const resizeObserver = new ResizeObserver(() => {
            chart.resize();
        });
        resizeObserver.observe(chartRef.current);

        return () => {
            chart.dispose();
            resizeObserver.disconnect();
        };
    }, []);

    return <div ref={chartRef} style={{ width: '40vw', height: '350px', maxWidth: '40vw', maxHeight: '350px' }}></div>;
};

export default EChartsComponent;

